<template>
	<view>
		<page-head :title="'我的积分'" :headtype="2"></page-head>
		<view class="card marginAuto">
			<image class="cardbg" src="@/static/my/withcard.png" mode="aspectFill"></image>
			<view class="cardmain marginAuto">
				<view class="cardl">
					<view class="cardl-title">我的积分</view>
					<view class="cardl-num">{{ usermsg.integral }}</view>
				</view>
				<view class="cardr">
					<view class="cardr-gz flex" @click="apifun.navigate('/pages/my/integralgz')">
						<text>积分规则</text>
						<u-icon name="arrow-right" color="#FF4E43" size="24"></u-icon>
					</view>
					<view class="card-dh" @click="apifun.navigate('/pages/homeList/pointsshop/pointsshop')">
						<u-button class="card-dh" text="兑换商品" shape="circle" color="#B9180C"></u-button>
					</view>
				</view>
			</view>
		</view>
		<view class="intermx flex marginAuto" @click="apifun.navigate('/pages/my/integralmx')">
			<text>积分明细</text>
			<u-icon name="arrow-right" color="#666666" size="24"></u-icon>
		</view>
		<view class="disfree marginAuto">兑换优惠券/运费券</view>
		<integr :disdata="disdata" @disusefun="disusefun"></integr>
	</view>
</template>

<script>
	import integr from '../../components/integr/integr.vue'
	export default {
		components: {
			integr
		},
		data() {
			return {
				usermsg:uni.getStorageSync('usermsg'),
				disdata:[],
				apifun:this.apifun,
			};
		},
		onLoad() {
			this.initData()
		},
		methods: {
			initData(){
				let sendData = {
					type:4
				};
				this.apifun.unirequest('/api/coupon/getCouponList','post',sendData,(res)=>{
					// console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.disdata = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			disusefun(item){  // 兑换
				let sendData = {
					coupon_id:item.id
				};
				this.apifun.unirequest('/api/coupon/setUserCoupon','post',sendData,(res)=>{
					console.log(res)
					if(res.code === 200){
						let datas = res.data;
						this.apifun.toast('兑换成功');
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
		onReachBottom() {
			this.page++;
			this.initData();
		},
		onPullDownRefresh() {
			// this.page = 1;
			// this.evdata = [];
			// this.initData();
			uni.stopPullDownRefresh();
		},
	};
</script>

<style scoped lang="scss">
	.card{
		position: relative;
		width: 680rpx;
		height:196rpx;
		margin-top:10rpx;
		.cardbg{
			position:absolute;
			top: 0;
			width: 680rpx;
			height:196rpx;
			z-index: 1;
			border-radius:20rpx;
		}
		.cardmain{
			position: relative;
			z-index: 2;
			width:90%;
			padding: 36rpx 0;
			.cardl{
				position: relative;
				.cardl-title{
					font-size: 30rpx;
					color: #FFFFFF;
				}
				.cardl-num{
					color: #fff;
					font-size: 40rpx;
					margin-top: 22rpx;
				}
			}
			.cardr{
				position: absolute;
				right: 0;
				top: 0;
				.cardr-gz{
					color:#FF4E43;
					font-size:24rpx;
					margin-top: 36rpx;
				}
				.card-dh{
					width:134rpx;
					height:56rpx;
					line-height: 56rpx;
					color: #fff;
					font-size:28rpx;
					border: none;
					margin-top: 32rpx;
				}
			}
		}
	}
	.intermx{
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		color:#666666;
		font-size:24rpx;
	}
	.disfree{
		width: 680rpx;
		line-height:60rpx;
		font-size:30rpx;
		color: #333333;
	}
</style>